<script setup lang="ts">
import ProgressBar from '@/views/Member/Order/NavBar/ProgressBar.vue'
</script>
<template>
    <!-- 全部订单详情 -->
    <!-- 待评价,已完成,待发货,已取消页面完成 -->
    <div class="single-detail">
        <div class="part-one">
            <!-- 全部订单和待付款页面相同 -->
            <div class="one-icon" v-if="false">
                <span class="iconfont icon-coin-yen" style="color: #27ba9b;font-size: 40px;"></span>
                <p class="one-pay">待付款</p>
            </div>
            <!-- 已取消 -->
            <!-- <div class="one-icon" v-else>
                <span class="iconfont icon-coin-yen" style="color: #27ba9b;font-size: 40px;"></span>
                <p class="one-pay">已取消</p>
            </div> -->
            <!-- 待收货 -->
            <div class="one-icon" v-else>
                <span class="iconfont icon-daishouhuofuben" style="color: #27ba9b;font-size: 40px;"></span>
                <p class="one-pay">待收货</p>
            </div>
            <!-- 待发货 -->
            <!-- <div class="one-icon" v-else>
                <span class="iconfont icon-coin-yen" style="color: #27ba9b;font-size: 40px;"></span>
                <p class="one-pay">待发货</p>
            </div> -->
            <!-- 待评价页面也注释,可以使用v-if直接判断点击传来的数据为 -->
            <!-- <div class="one-icon" v-else>
                <span class="iconfont icon-coin-yen" style="color: #27ba9b;font-size: 40px;"></span>
                <p class="one-pay">待评价</p>
            </div> -->
            <!-- 已完成 -->
            <!-- <div class="one-icon" v-else>
                <span class="iconfont icon-jiaoyiwancheng" style="color: #27ba9b;font-size: 40px;"></span>
                <p class="one-pay">交易完成</p>
            </div> -->
            <div class="one-time">
                <p>订单编号：1684136408341676034</p>
                <p>下单时间：2023-07-26 17:39:44</p>
            </div>
            <div class="one-btn" v-if="false">
                <button class="one-paying">立即付款</button>
                <button class="one-cancel">取消订单</button>
            </div>
            <!-- 待收货 -->
            <div class="one-btn" v-else>
                <button class="one-paying">确认收货</button>
                <button class="one-buying">再次购买</button>
            </div>
            <!-- 已取消 -->
            <!-- <div class="one-btn" v-else>
            </div> -->
            <!-- 待发货 -->
            <!-- <div class="one-btn" v-else>
                <button class="one-paying">再次购买</button>
            </div> -->
            <!-- 评价商品 -->
            <!-- <div class="one-btn" v-else>
                <button class="one-paying">再次购买</button>
                <button class="one-buying">评价商品</button>
                <button class="one-cancel">申请售后</button>
            </div> -->
            <!-- 已完成 -->
            <!-- <div class="one-btn" v-else>
                <button class="one-paying">申请售后</button>
                <button class="one-buying">评价商品</button>
                <button class="one-buying">再次购买</button>
            </div> -->
        </div>
        <div class="part-two">
            <ProgressBar></ProgressBar>
        </div>
        <!-- 待评价 -->
        <!-- <div class="wait-say" v-if="false">
                <div class="float-left">
                    小兔兔到了小福家里，请签收
                    <span style="margin-left: 30px">2023-07-06 03:12:41</span>
                </div>
                <a href="javascript:;" class="float-right">查看物流</a>
        </div> -->
        <!-- 已完成 -->
        <div class="wait-say" v-if="false">
                <div class="float-left">
                    2018-01-06 17:09:35
                    <span style="margin-left: 30px;color: #333;">订单已签收, 期待再次为您服务</span>
                </div>
                <a href="javascript:;" class="float-right">查看物流</a>
        </div>
        <div class="part-three">
            <div class="three-goods">订单商品</div>
            <div class="goods-detail">
                <div class="goods-title">
                    <span class="goods-msg">商品信息</span>
                    <span class="goods-price">单价</span>
                    <span class="goods-num">数量</span>
                    <span class="goods-total">小计</span>
                    <span class="goods-pay">实付</span>
                </div>
                <div class="goods-buy">
                    <ul>
                        <li class="buy-show">
                            <a href="javascript:;" class="show-link">
                                <img src="../../../../images/order-tea.png" alt="">
                                <div class="p-all">
                                    <p class="show-top">青石花梨纵享茶道精制花梨木茶盘茶台</p>
                                    <p class="show-bottom">茶盘:花梨木茶盘</p>
                                </div>
                            </a>
                            <div class="show-price">¥498</div>
                            <div class="show-num">1</div>
                            <div class="show-total">¥498</div>
                            <div class="show-pay">¥498</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="three-goods">收货信息</div>
            <div class="receive-msg">
                <div class="msg-person">收<i class="i-em"></i>货<i class="i-em"></i>人: <span class="person-one">张三</span></div>
                <div class="msg-phone">联系方式: <span class="phone-one">157****3611</span></div>
                <div class="msg-address">收货地址: <span class="address-one">北京北京市东城区aaaa</span></div>
            </div>
            <div class="three-goods">支付方式及送货时间</div>
            <div class="list-time">
                <div class="list-num">支付方式: <span class="num-one">支付宝</span></div>
                <div class="list-date">送货时间: <span class="date-one">双休日、假日送货(适合于家庭地址)</span></div>
            </div>
            <div class="three-goods">发票信息</div>
            <div class="receive-msg">
                <div class="msg-person">发票类型: <span class="person-one">电子发票</span></div>
                <div class="msg-phone">发票内容: <span class="phone-one">日用品</span></div>
                <div class="msg-address">发票抬头: <span class="address-one">个人</span></div>
            </div>
            <div class="three-goods">订单信息</div>
            <div class="list-time">
                <div class="list-num">订单编号: <span class="num-one">在线支付</span></div>
                <div class="list-date">下单时间: <span class="date-one">2023-07-26 17:39:44</span></div>
            </div>
        </div>
        <div class="part-four">
            <div class="four-info">
                <div class="four-num">商品件数:<span class="num-one">1件</span></div>
                <div class="four-price">商品总价:<span class="price-one">¥24.9</span></div>
                <div class="four-money">运<i style="display: inline-block;width: 2em"></i>费:<span class="money-one">3</span></div>
                <div class="four-pay">应付总额:<span class="pay-one">¥27.9</span></div>
            </div>
        </div>
    </div>
</template>
<style lang="less">
@import url(../font/iconfont.css);
.single-detail {
    width: 100%;
    height: 100%;
    background-color: #fff;
    .part-one {
        width: 100%;
        height: 180px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        .one-icon {
            width: 220px;
            height: 88px;
            text-align: center;
            .one-pay {
                font-size: 16px;
                color: #666;
                margin-bottom: 10px;
            }
        }
        .one-time {
            color: #999;
            font-size: 14px;
            line-height: 30px;
        }
        .one-btn {
            width: 440px;
            height: 32px;
            flex: 1;
            text-align: right;
            margin-right: 100px;
            .one-buying {
                width: 100px;
                height: 32px;
                background-color: #E6FAF6;
                border: 1px solid #27BA9B;
                color: #27BA9B;
                font-size: 14px;
                text-align: center;
                border-radius: 4px;
                margin-right: 20px;
                padding: 1px 6px;
            }
            .one-paying {
                width: 100px;
                height: 32px;
                background-color: #27BA9B;
                color: #fff;
                font-size: 14px;
                text-align: center;
                border: none;
                border-radius: 4px;
                margin-right: 20px;
                padding: 1px 6px;
            }
            .one-cancel {
                width: 100px;
                height: 32px;
                background-color: #ccc;
                color: #fff;
                font-size: 14px;
                text-align: center;
                border: none;
                border-radius: 4px;
                margin-right: 20px;
                padding: 1px 6px;
            }
        }
    }
    .part-two {
        width: 100%;
        height: 142px;
    }
    .wait-say {
        width: 900px;
        height: 50px;
        margin: 30px 50px 0;
        padding: 0 30px;
        background-color: #F5F5F5;
        box-sizing: border-box;
        .float-left {
            float: left;
            color: #999;
            font-size: 14px;
            text-align: center;
            line-height: 4;
        }
        .float-right {
            float: right;
            text-decoration: none;
            color: #27BA9B;
            font-size: 14px;
            text-align: center;
            line-height: 4;
        }
    }
    .part-three {
        width: 100%;
        height: 100%;
        padding: 0 50px;
        .three-goods {
            width: 100%;
            height: 72px;
            color: #333;
            font-size: 16px;
            padding: 25px 5px;
        }
        .goods-detail {
            width: 100%;
            height: 100%;
            .goods-title {
                width: 900px;
                height: 62px;
                background-color: #F5F5F5;
                box-sizing: border-box;
                line-height: 62px;
            }
            .goods-msg {
                display: inline-block;
                width: 400px;
                height: 62px;
                color: #333;
                font-size: 14px;
                padding: 1px 1px 1px 20px;
            }
            .goods-price {
                display: inline-block;
                width: 128px;
                height: 62px;
                color: #333;
                font-size: 14px;
                padding: 1px;
                text-align: center;
            }
            .goods-num {
                display: inline-block;
                width: 112px;
                height: 62px;
                font-size: 14px;
                color: #333;
                text-align: center;
                padding: 1px;
            }
            .goods-total {
                display: inline-block;
                width: 128px;
                height: 62px;
                font-size: 14px;
                color: #333;
                text-align: center;
                padding: 1px;
            }
            .goods-pay {
                display: inline-block;
                width: 132px;
                height: 62px;
                font-size: 14px;
                color: #333;
                text-align: center;
                padding: 1px;
            }
            .goods-buy {
                width: 900px;
                height: 112px;
                border: 1px solid #F5F5F5;
                .buy-show {
                    width: 100%;
                    height: 100%;
                    box-sizing: border-box;
                    .show-link {
                        display: inline-block;
                        width: 378px;
                        height: 110px;
                        padding: 20px 0;
                        box-sizing: border-box;
                        // display: flex;
                        // justify-content: space-evenly;
                        img {
                            width: 70px;
                            height: 70px;
                        }
                        .p-all {
                            display: inline-block;
                            .show-top {
                                color: #333;
                                font-size: 14px;
                                padding: 0px 0px 5px;
                            }
                            .show-bottom {
                                color: #999;
                                font-size: 14px;
                                padding: 0px 0px 5px;
                            }
                        }
                    }
                    .show-price {
                        display: inline-block;
                        width: 128px;
                        color: #333;
                        font-size: 14px;
                        padding: 1px;
                        text-align: center;
                        height: 110px;
                        line-height: 110px;
                    }
                    .show-num {
                        height: 110px;
                        line-height: 110px;
                        display: inline-block;
                        width: 112px;
                        font-size: 14px;
                        color: #333;
                        text-align: center;
                        padding: 1px;
                    }
                    .show-total {
                        height: 110px;
                        line-height: 110px;
                        display: inline-block;
                        width: 128px;
                        font-size: 14px;
                        color: #333;
                        text-align: center;
                        padding: 1px;
                    }
                    .show-pay {
                        height: 110px;
                        line-height: 110px;
                        display: inline-block;
                        width: 132px;
                        font-size: 14px;
                        color: #333;
                        text-align: center;
                        padding: 1px;
                    }
                }
            }
            
        }
        .receive-msg {
                width: 900px;
                height: 132px;
                padding: 20px;
                border: 1px solid #F5F5F5;
                box-sizing: border-box;
                .msg-person {
                    font-size: 14px;
                    color: #999;
                    margin-bottom: 10px;
                    .i-em {
                        display: inline-block;
                        width: 0.5em;
                    }
                    .person-one {
                        color: #333;
                        margin-left: 10px;
                    }
                }
                .msg-phone {
                    font-size: 14px;
                    color: #999;
                    margin-bottom: 10px;
                    .phone-one {
                        color: #333;
                        margin-left: 10px;
                    }
                }
                .msg-address {
                    font-size: 14px;
                    color: #999;
                    margin-bottom: 10px;
                    .address-one {
                        color: #333;
                        margin-left: 8px;
                    }
                }
        }
        .list-time {
            width: 900px;
            height: 102px;
            padding: 20px;
            border: 1px solid #F5F5F5;
            box-sizing: border-box;
            .list-num {
                font-size: 14px;
                color: #999;
                margin-bottom: 12px;
                .num-one {
                    margin-left: 10px;
                    color: #333;
                }
            }
            .list-date {
                font-size: 14px;
                color: #999;
                .date-one {
                    margin-left: 10px;
                    color: #333;
                }
            }
        }
    }
    .part-four {
       width: 900px;
       height: 290px;
       margin: 0 50px;
       padding: 30px 30px 100px;
       box-sizing: border-box;
       .four-info {
            width: 250px;
            height: 160px;
            float: right;
            .four-num {
                margin-top: 8px;
                font-size: 16px;
                color: #333;
                .num-one {
                    float: right;
                    margin-right: 30px;
                }
            }
            .four-price {
                margin-top: 18px;
                font-size: 16px;
                color: #333;
                .price-one {
                    float: right;
                    margin-right: 30px;
                }
            }
            .four-money {
                margin-top: 18px;
                font-size: 16px;
                color: #333;
                .money-one {
                    float: right;
                    margin-right: 30px;
                }
            }
            .four-pay {
                margin-top: 18px;
                margin-bottom: 8px;
                font-size: 16px;
                color: #333;
                .pay-one {
                    float: right;
                    margin-right: 30px;
                    font-size: 20px;
                    color: #CF4444;
                }
            }
       } 
    }
} 
</style> 